<template>
	<uni-nav-bar dark :fixed="true" background-color="#f5f5f5" status-bar left-icon="left" title="信息设置" :border="false"
		@clickLeft="back" color="#000" />
	<view class="container">


		<text class="item-titlea">通知设置</text>

		<view class="ki">
			<view class="list-item">
				<text class="item-title">订单消息</text>
				<switch class="item-switch" color="#007AFF" />
			</view>

			<view class="list-item">
				<text class="item-title">互动消息</text>
				<switch class="item-switch" color="#007AFF" />
			</view>

		</view>
		<text class="item-titlea">谁可以私信我</text>

		<view class="section">

			<radio-group @change="radioChange" class="radio-group">
				<label class="radio-item" v-for="(item, index) in radioItems" :key="index">
					<text class="radio-label">{{item.name}}</text>
					<radio class="radio" :value="item.value" :checked="item.checked" />
				</label>
			</radio-group>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	const radioItems = ref([{
			name: '所有人',
			value: 'all',
			checked: true
		},
		{
			name: '互相关注的驴友',
			value: 'mutual',
			checked: false
		},
		{
			name: '不接收私信',
			value: 'none',
			checked: false
		}
	])

	function radioChange(e) {
			const value = e.detail.value;
			radioItems.value.forEach(item => {
				item.checked = item.value === value;
			});
		}
const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style scoped>
	.container {
		margin-top: 25rpx;
	}

	.item-titlea {
		font-size: 20rpx;
		margin: 5rpx;
		color: #ccc;
	}

	.container {
		padding: 20rpx 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.ki {
		background-color: #fff;
		border-radius: 19rpx;
		margin-top: 12rpx;
		margin-bottom: 10rpx;
	}

	.list-item {
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 0;

		margin-bottom: 15rpx;

		padding: 17rpx 20rpx;
	}
	.item-title {
		font-size: 22rpx;
		color: #333;
	}

	.section {
		background-color: #fff;
		padding: 15rpx 20rpx;
		border-radius: 12rpx;
		margin-top: 20rpx;
	}

	.section-title {
		font-size: 66rpx;
		color: #333;
		font-weight: 500;
		display: block;
		margin-bottom: 30rpx;
	}

	.item-switch {
		width: 80rpx;

	}

	.radio-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 19rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.radio-item:last-child {
		border-bottom: none;
	}

	.radio-label {
		font-size: 22rpx;
		color: #666;
		padding: 6rpx;
	}

	.radio {
		transform: scale(0.9);
	}
</style>